<template>
<div class="ruleConfigDetailsItem">
  <el-descriptions :column="3" border>
    <el-descriptions-item>
      <template slot="label">
        券种类
      </template>
      <el-select v-model="model.ruleCode">
        <el-option v-for="item in filterSemOptions(model.ruleCode, semOptions)" :key="item.code" :label="item.name" :value="item.code" :disabled="item.disabled"></el-option>
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        种类数量
      </template>
      <el-input-number style="width: 100px" step-strictly :controls="false" :min="1" v-model="model.num"></el-input-number>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        自融数量
      </template>
      <el-input-number style="width: 100px" step-strictly :controls="false" :min="1" v-model="model.selfNum"></el-input-number>
    </el-descriptions-item>
  </el-descriptions>
  <div class="item-delete">
    <el-link :underline="false" type="danger" @click="delDetail(model)"><i class="el-icon-delete"></i></el-link>
  </div>
</div>
</template>

<script>
export default {
  name: "ruleConfigDetailsItem",
  inject: ['delDetail', 'filterSemOptions'],
  props:{
    model: Object,
    semOptions: Array
  }
}
</script>

<style scoped lang="less">
.ruleConfigDetailsItem{
  display: flex;
  >.el-descriptions{
    flex-grow: 2;
  }
  >.item-delete{
    width: 30px;
    border: @common-border;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    >.el-link{
      font-size: 18px;
    }
  }
}
</style>